@import "../../common/less/theme";

.goods {
	.g-header {
		position       : fixed;
		top            : 0;
		left           : 0;
		width          : 100%;
		display        : flex;
		justify-content: center;
		height         : 88rpx;
		z-index        : 10;

		.h-middle {
			display: flex;

			.m-item {
				position   : relative;
				display    : flex;
				align-items: center;
				color      : #666;

				&:not(:first-child) {
					margin-left: 34rpx;
				}

				&-active {
					text {
						color: #aa8a59;
					}

					&::after {
						position     : absolute;
						content      : '';
						bottom       : 0;
						left         : 0;
						width        : 100%;
						height       : 0;
						border-bottom: 3rpx solid #aa8a59;
					}
				}
			}
		}

		.h-right {
			position : absolute;
			top      : 50%;
			right    : 27rpx;
			transform: translateY(-50%);

			text {
				display      : inline-block;
				width        : 60rpx;
				height       : 60rpx;
				text-align   : center;
				line-height  : 60rpx;
				border-radius: 30px;
				font-size    : 40rpx;
				background   : RGBA(0, 0, 0, .1);
				color        : white;

				&:first-child {
					margin-right: 30rpx;
				}
			}
		}
	}

	.g-banner {
		swiper {
			height: 750rpx;

			.b-image {
				height: 100%;

				image {
					width : 100%;
					height: 100%;
				}
			}
		}
	}

	.g-info {
		padding      : 28rpx;
		margin-bottom: 10rpx;
		background   : white;

		.i-name {
			text {
				font-size  : 34rpx;
				font-weight: 600;
				color      : #333;
			}
		}

		.i-desc {
			padding: 20rpx 0;

			text {
				color: #666;
			}
		}

		.i-price {
			.price-pay {
				display    : flex;
				align-items: flex-end;

				text {
					&:nth-child(1) {
						color: @primary-color;
					}

					&:nth-child(2) {
						font-size  : 40rpx;
						font-weight: 600;
						color      : @primary-color;
					}
				}
			}
		}
	}

	.g-count {
		margin-bottom: 10rpx;
		background   : white;

		.g-cell {
			display   : flex;
			min-height: 80rpx;
			padding   : 0 28rpx;

			.c-left {
				display    : flex;
				align-items: center;
				flex-basis : 93rpx;

				text {
					color: #666;
				}
			}

			.c-mid {
				display    : flex;
				align-items: center;
				flex       : 1;
			}

			.c-right {
				display        : flex;
				justify-content: flex-end;
				align-items    : center;
				flex-basis     : 40rpx;

				text {
					font-size: 24rpx;
					color    : #666;
				}
			}
		}
	}

	.g-spec {
		margin-bottom: 10rpx;
		background   : white;

		.g-cell {
			display   : flex;
			min-height: 80rpx;
			padding   : 0 28rpx;

			.c-left {
				display    : flex;
				align-items: center;
				flex-basis : 93rpx;

				text {
					color: #666;
				}
			}

			.c-mid {
				display    : flex;
				align-items: center;
				flex       : 1;
			}

			.c-right {
				display        : flex;
				justify-content: flex-end;
				align-items    : center;
				flex-basis     : 40rpx;

				text {
					font-size: 24rpx;
					color    : #666;
				}
			}
		}
	}

	.g-instruction {
		margin-bottom: 10rpx;
		background   : white;

		.g-cell {
			display   : flex;
			min-height: 80rpx;
			padding   : 0 28rpx;

			.c-left {
				display    : flex;
				align-items: center;
				flex-basis : 93rpx;

				text {
					color: #666;
				}
			}

			.c-mid {
				display    : flex;
				align-items: center;
				flex       : 1;

				.instruction {
					padding: 20rpx 0;

					.i-item {
						display: flex;

						.eosfont {
							font-size: 32rpx;
							color    : #ab8959;
						}

						.text {
							padding-left: 5rpx;
							color       : #333;
						}

						&:not(:first-child) {
							padding-top: 20rpx;
						}
					}
				}
			}

			.c-right {
				display        : flex;
				justify-content: flex-end;
				align-items    : center;
				flex-basis     : 40rpx;

				i {
					font-size: 24rpx;
					color    : #666;
				}
			}
		}
	}

	.g-evaluate {
		margin-bottom: 10rpx;

		.e-header {
			display        : flex;
			justify-content: space-between;
			align-items    : center;
			height         : 99rpx;
			padding        : 0 28px;
			background     : white;

			.h-left {
				display    : flex;
				align-items: center;

				text {
					font-weight: 600;
					color      : #333;
				}
			}

			.h-right {
				display    : flex;
				align-items: center;
				color      : #aa8a59;

				text {
					font-size: 24rpx;
				}
			}
		}

		.e-content {
			background: white;

			.c-wrap {
				white-space: nowrap;

				.w-item {
					display    : inline-block;
					width      : 620rpx;
					height     : 352rpx;
					margin-left: 28rpx;

					.e-card {
						height    : 100%;
						box-sizing: border-box;
						padding   : 28rpx;
						background: #f8f8f8;

						.c-user {
							display    : flex;
							align-items: center;

							.u-avatar {
								display: inline-block;
								height : 70rpx;
								width  : 70rpx;

								image {
									width        : 100%;
									height       : 100%;
									border-radius: 50%;
								}
							}

							.u-name {
								padding: 0 15rpx;
							}

							.u-star {
								display    : flex;
								align-items: center;

								image {
									width : 30rpx;
									height: 30rpx;
								}
							}
						}

						.c-text {
							padding-top: 28rpx;

							text {
								white-space: normal;
								color      : #333;
							}
						}
					}

					&:last-child {
						margin-right: .373rem;
					}
				}
			}
		}

		.e-footer {
			display        : flex;
			justify-content: center;
			align-items    : center;
			height         : 99rpx;
			background     : white;
			color          : #aa8a59;

			text {
				font-size: 24rpx;
			}
		}
	}

	.g-details {
		margin-bottom: 115rpx;
		background   : white;

		.d-tab {
			display        : flex;
			align-items    : center;
			justify-content: center;
			height         : 83rpx;

			.t-item {
				text {
					color: #666;
				}

				&:not(:first-child) {
					margin-left: 88rpx;
				}

				&-active {
					text {
						font-weight: 700;
						color      : #aa8a59;
					}
				}
			}
		}

		.d-content {
			.c-item {
				image {
					display: block;
					width  : 100%;
					height : 200rpx;
				}
			}
		}
	}

	.g-footer {
		position  : fixed;
		bottom    : 0;
		left      : 0;
		display   : flex;
		height    : 115rpx;
		width     : 100%;
		box-sizing: border-box;
		padding   : 0 28rpx;
		background: white;

		.f-left {
			display        : flex;
			justify-content: space-around;
			flex           : 1;

			.l-item {
				display        : flex;
				flex-direction : column;
				align-items    : center;
				justify-content: center;
				color          : #666;

				.iconfont {
					font-size: 40rpx;
				}
			}
		}

		.f-right {
			display    : flex;
			align-items: center;
			flex-grow  : 0;

			.r-item {
				display      : inline-block;
				width        : 222rpx;
				height       : 68rpx;
				text-align   : center;
				line-height  : 68rpx;
				border-radius: 34rpx;

				text {
					color: white;
				}

				&-buy {
					background: #b60a0a;
				}

				&-cart {
					background: @primary-color;
				}

				&:nth-child(2) {
					margin-left: 10rpx;
				}
			}
		}
	}

	.g-count-panel {
		min-height: 700rpx;
		padding   : 0 27rpx;
		background: white;

		.p-goods {
			display    : flex;
			align-items: center;
			padding    : 27rpx 0;

			.g-image {
				flex-basis: 127rpx;
				height    : 127rpx;

				image {
					height: 100%;
					width : 100%;
				}
			}

			.g-info {
				display        : flex;
				flex-direction : column;
				justify-content: center;
				padding-left   : 20rpx;

				.i-name {
					text {
						font-size: 28rpx;
					}
				}

				.i-price {
					text {
						font-size  : 34rpx;
						font-weight: 600;
						color      : #b6090b;
					}
				}
			}
		}

		.p-section {
			.s-title {
				display    : flex;
				align-items: center;
				height     : 62rpx;

				text {
					font-size: 28rpx;
					color    : #666;
				}
			}

			.s-content {
				padding: 20rpx 0;
			}
		}
	}

	.g-spec-panel {
		min-height: 700rpx;
		padding   : 0 27rpx;
		background: white;

		.p-goods {
			display    : flex;
			align-items: center;
			padding    : 27rpx 0;

			.g-img {
				flex-basis: 127rpx;
				height    : 127rpx;

				image {
					height: 100%;
					width : 100%;
				}
			}

			.g-info {
				display        : flex;
				flex-direction : column;
				justify-content: center;
				padding-left   : 20px;

				.i-name {
					text {
						font-size: 28rpx;
					}
				}

				.i-price {
					text {
						font-size  : 34rpx;
						font-weight: 600;
						color      : #b6090b;
					}
				}
			}
		}

		.p-section {
			.s-title {
				display    : flex;
				align-items: center;
				height     : 62rpx;

				text {
					font-size: 28rpx;
					color    : #666;
				}
			}

			.s-content {
				display: flex;
				padding: 20rpx 0;

				text {
					flex-grow    : 0;
					height       : 50rpx;
					line-height  : 50rpx;
					padding      : 0 22rpx;
					margin       : 0 20rpx 20rpx 0;
					box-sizing   : border-box;
					border-radius: 5rpx;
					border       : 1rpx solid #ededed;
					font-size    : 28rpx;
					color        : #666;

					&.active {
						border    : none;
						background: #845d32;
						color     : white;
					}
				}
			}
		}
	}
}